<template>
	<view class="tab-bar flex" :style="{ top: !showPlan2 ? topH + 'px' : 0, paddingTop: showPlan2 ? topH + 'px' : 0 }" :class="{ tran: showPlan2 }">
		<view class="plan-1" @click="goBack()" v-show="!showPlan2">
			<up-icon name="arrow-left" class="tab-bar-icon" size="20" color="#fff" />
		</view>
		<view class="plan-2" v-show="showPlan2">
			<view class="flex top-tab flex items-center justify-around">
				<up-icon name="arrow-left" size="20" class="left-icon" @click="goBack()" />
				<view class="tabs flex items-center justify-between flex-1">
					<view v-for="(item, index) in tabs" :key="index" :class="['item', activeIndex === index ? 'active' : '']" @click="goTabs(index)">
						{{ item }}
					</view>
				</view>
			</view>
		</view>
	</view>

	<view class="container">
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item style="width: 100%" class="swiper_item" v-for="(item, index) in product.images" :key="index">
					<image :src="imgUrl + item" style="width: 100%"></image>
				</swiper-item>
			</swiper>
		</view>


		<view class="title-vss" id="section0">
			<view class="price-vss flex items-center justify-between">
				<view class="left flex items-center">
					
					<view class="price rmb">{{ product.vip_price }}</view>

					<view class="underline">￥{{ product.price }}</view>
				</view>
			</view>

			<view class="big-title">
				<view class="value line-2-clamp">{{ product.title }}</view>
				<view class="flex items-center justify-between">
					<view class="sale">销量{{ product.is_seckill == 1 ? product.seckill_sales : product.sales }}</view>
					<view class="stock">库存{{ product.is_seckill == 1 ? product.seckill_stock : product.stock }}</view>
				</view>
			</view>
		</view>

		<view class="spec-fee" v-if="product.spec_open == 2">
			<view class="item flex items-center justify-between" @click="specPopup = true">
				<view class="name">规格</view>
				<view class="val flex-1">{{ currentSpec }}</view>
				<up-icon name="arrow-right" color="#666666" />
			</view>
			<!-- <view class="item flex items-center justify-between">
				<view class="name">运费</view>
				<view class="val flex-1" v-if="product.freight > 0">快递 ￥{{ product.freight }}</view>
				<view class="val flex-1" v-else>包邮</view>
			</view> -->
		</view>

		
	
		<view class="content" id="section2">
			<view class="title flex items-center justify-center">
				<image src="/static/product/ic_spxqleft@2x.png" class="icon"></image>
				<view class="val">商品详情</view>
				<image src="/static/product/ic_spxqright@2x.png" class="icon"></image>
			</view>
			<view class="content-val">
				<mp-html :content="product.content" />
			</view>
		</view>
	</view>

	<view class="footer flex items-center justify-between">
		<view class="flex items-center justify-between">
			
			<view class="fun flex flex-col items-center justify-between" @click="showKefu = true">
				<image :src="'/static/product/ic_spxqkefu@3x.png'" class="icon"></image>
				<text class="text">客服</text>
			</view>

			<view class="fun flex flex-col items-center justify-between" style="position: relative" @click="goIndex('/pages/cart')">
				<image src="/static/product/ic_spxqgwcd.png" class="icon"></image>
				<text class="text">购物车</text>
				<up-badge :show="product.cart_num > 0" shape="horn" bgColor="#FB3204" max="99" :absolute="true" :value="product.cart_num" :offset="[-5, -2]"></up-badge>
			</view>
		</view>
		<view class="btn-container flex items-center justify-between flex-1" @click="specPopup = true" v-if="!product.is_seckill">
			<view class="btn cart-btn">加入购物车</view>
			<view class="btn bny-btn">立即购买</view>
		</view>
		<view class="btn-container flex items-center justify-between flex-1" v-else>
			<view @click="specPopup = true" class="btn bny-btn" style="width: 100%" v-if="product.seckill.status == 2">立即抢购</view>
			<view class="btn bny-btn" style="width: 100%" v-else>尚未开始</view>
		</view>
	</view>

	<up-popup v-model:show="specPopup" closeable close-icon="close" position="bottom" :round="10" :customStyle="{ padding: '30rpx 30rpx 0 30rpx' }">
		<view class="buy-popup">
			<view class="info flex">
				<image :src="currentSpecInfo ? imgUrl + currentSpecInfo.icon : imgUrl + product.icon" class="icon"></image>
				<view class="right flex flex-col justify-around flex-1">
					<view class="price rmb flex items-center">
						{{ currentSpecInfo ? currentSpecInfo.vip_price : product.vip_price }}

					</view>
					<view class="spec-selected">
						已选
						<text>{{ currentSpec != '请选择' ? currentSpec : '' }}</text>
					</view>
				</view>
			</view>

			<view class="spec" v-for="(item, index) in product.specInfo" :key="index">
				<view class="item">
					<view class="fast-spec">{{ item.title }}</view>
					<view class="second-spec flex items-center">
						<!-- <view class="second-spec-item active">黑色毛衣</view> -->
						<view
							:class="{ active: item2.change == 1 }"
							class="second-spec-item"
							v-for="(item2, index2) in item.child"
							:key="index2"
							@click="changeSpec(index, index2)"
						>
							{{ item2.title }}
						</view>
					</view>
				</view>
			</view>
			<view class="num flex items-center justify-between">
				<view class="left">数量</view>
				<view>
					<up-number-box v-model="num"></up-number-box>
				</view>
			</view>

			<view class="btn-container flex items-center justify-between" v-if="!product.is_seckill">
				<view class="btn cart-btn" @click="joinCartBuy(1)">加入购物车</view>
				<view class="btn bny-btn" @click="joinCartBuy(2)">立即购买</view>
			</view>
			<view class="btn-container flex items-center justify-between" v-else>
				<view class="btn bny-btn" @click="joinCartBuy(2)" style="width: 100%">立即抢购</view>
			</view>
		</view>
	</up-popup>

	<up-popup v-model:show="editShareContentOpen" :round="10">
		<view class="edit-share">
			<textarea class="inp textarea" placeholder-class="place-inp" placeholder="请填写要分享的内容~" v-model="product.share_content"></textarea>
		</view>
		<view class="fixed-bottom" @click="editShareContentOpen = false">
			<view class="btn">
				<text>确认</text>
			</view>
		</view>
	</up-popup>

	<up-popup v-model:show="showKefu" mode="center" :closeOnClickOverlay="true" :closeable="false" class="kefuPopup">
		<view class="kefu-fill">
			<view class="kefu">
				<image src="/static/product/ic_keftctu@2x.png" class="top-icon"></image>
				<view class="box flex flex-col items-center justify-center">
					<view class="info flex flex-col items-center justify-center">
						<view class="tips">客服电话</view>
						<view class="contact">{{ product.contact }}</view>
					</view>
					<view class="bd" @click="makePhone(product.contact)">立即拨打</view>
				</view>
				<image src="/static/product/ic_tcclosebai@2x.png" class="bom-icon" @click="showKefu = false"></image>
			</view>
		</view>
	</up-popup>

</template>

<script setup>
	import { ref, onMounted, nextTick, inject, reactive } from 'vue';
	import { port, imgUrl, goUrl, hint, goBack, goIndex, loading, closeLoading } from '/service/port';
	import { onLoad, onShow, onPageScroll, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();

	const showKefu = ref(false);
	const makePhone = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		});
	};
	const num = ref(1);
	const specPopup = ref(false);

	const showPlan2 = ref(false);
	const tabs = ['商品', '评价', '详情'];
	const activeIndex = ref(0);
	const sectionPositions = ref([]);
	const navHeight = 44;
	let currentScrollTop = 0;

	const searchr = ref(0);
	const topH = ref(0);

	const shareShow = ref(false);

	const id = ref('');
	const parent_code = ref('');
	const product = ref('');
	const currentSpec = ref('请选择');
	const currentSpecInfo = ref('');
	const pickSpec = ref([]);

	const editShareContentOpen = ref(false);

	function editShareContent() {
		editShareContentOpen.value = true;
	}

	const lockScroll = ref(false);
	const timeData = ref({});
	function goTabs(index) {
		lockScroll.value = true;

		if (!index) {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			showPlan2.value = false;
			lockScroll.value = false;
		} else {
			const query = uni.createSelectorQuery();
			query
				.select('#section' + index)
				.boundingClientRect((res) => {
					if (!res) {
						uni.showToast({ title: '元素未找到', icon: 'none' });
						return;
					}

					let ss = Math.floor(res.top + uni.getSystemInfoSync().windowHeight * 0.4);
					activeIndex.value = index;
					uni.pageScrollTo({
						scrollTop: ss,
						duration: 300
					});
					setTimeout(() => {
						lockScroll.value = false;
					}, 500);
				})
				.exec();
		}
	}

	// 定义 onChange 方法
	const onChange = (e) => {
		timeData.value = e;
	};

	// 初始化设备像素比
	onMounted(() => {
		setTimeout(updateSectionPositions, 500);
	});

	const source = ref('h5');
	onShow(() => {
		// #ifdef MP-WEIXIN
		const menuInfo = inject('menuButtonInfo');
		topH.value = menuInfo.top;
		searchr.value = menuInfo.width + 25;
		source.value = 'mp-weixin';
		// #endif

		getProductInfo();
	});

	onLoad((e) => {
		if (e.id) {
			id.value = e.id;
		}

		if (e.parent_code) {
			parent_code.value = e.parent_code;
			uni.setStorageSync('parent_code', e.parent_code);
		}

		// #ifdef MP-WEIXIN
		const scene = decodeURIComponent(e.scene || '');
		if (scene) {
			const param = scene.split(',');
			id.value = param[0];
			parent_code.value = param[1];

			uni.setStorageSync('parent_code', parent_code.value);
		}

		// 监听分享给好友
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});

		//  #endif
	});

	const wxConfig = ref('');
	// #ifdef H5
	const initWxConfig = async () => {
		wxJS.config(wxConfig.value.sign);
		wxJS.ready(() => {
			// 分享给朋友
			wxJS.updateAppMessageShareData({
				title: product.value.title,
				desc: product.value.share_content,
				link: wxConfig.value.link,
				imgUrl: product.value.icon
			});

			// 分享到朋友圈
			wxJS.updateTimelineShareData({
				title: product.value.title,
				link: wxConfig.value.link,
				imgUrl: product.value.icon
			});
		});

		wxJS.error((err) => {
			console.error('微信配置错误:', err);
		});
	};
	// #endif

	// 好友分享
	onShareAppMessage(() => {
		return {
			title: product.value.title,
			path: '/pages/product/details?id=' + product.id,
			imageUrl: product.value.icon
		};
	});

	onShareTimeline(() => {
		return {
			title: product.value.title,
			path: '/pages/product/details?id=' + product.id,
			imageUrl: product.value.icon
		};
	});

	function changeSpec(i1, i2) {
		const spec = product.value.specInfo[i1].child.map((v, i) => {
			v.change = i2 == i ? 1 : 0;
			if (i2 == i) {
				pickSpec.value[i1] = v.title;
			}
			return v;
		});

		product.value.specInfo[i1].child = spec;

		if (Object.keys(pickSpec.value).length == product.value.specInfo.length) {
			currentSpec.value = pickSpec.value.join(',');

			getProductSpecInfo(currentSpec.value);
		}
	}

	async function joinCartBuy(type) {
		if (product.value.spec_open == 2) {
			if (Object.keys(pickSpec.value).length != product.value.specInfo.length) {
				hint('请选择规格');
				return false;
			}
		}

		loading();
		let res = await port(type == 1 ? 'addCart' : 'productSubmit', { pid: product.value.id, num: num.value, spec: pickSpec.value.join(',') });
		setTimeout(() => {
			specPopup.value = false;
			closeLoading();
			if (type == 1) {
				hint(res.msg);
				product.value.cart_num += num.value;
			} else {
				goUrl('/pages/order/index');
			}
		}, 100);
	}

	async function collectProduct(is_collect) {
		let res = await port('collectProduct', { id: product.value.id, status: is_collect == 1 ? 0 : 1 });
		setTimeout(() => {
			hint(res.msg);
			product.value.is_collect = is_collect == 1 ? 0 : 1;
		}, 100);
	}

	async function getProductSpecInfo(spec) {
		let res = await port('getProductSpecInfo', { pid: product.value.id, spec: spec });
		currentSpecInfo.value = res.data;
	}

	async function getProductInfo() {
		let res = await port('getProductInfo', { id: id.value });
		product.value = res.data;
	}

	onPageScroll(async (e) => {
		if (lockScroll.value) return;
		showPlan2.value = e.scrollTop > 300;
		currentScrollTop = e.scrollTop;
		await updateSectionPositions();
		const currentPos = e.scrollTop + navHeight + 20;

		for (let i = sectionPositions.value.length - 1; i >= 0; i--) {
			if (currentPos >= sectionPositions.value[i]) {
				activeIndex.value = i;
				break;
			}
		}
	});

	const updateSectionPositions = () => {
		return new Promise((resolve) => {
			const query = uni.createSelectorQuery();
			['#section0', '#section1', '#section2'].forEach((id) => {
				query.select(id).boundingClientRect();
			});

			query.exec((res) => {
				sectionPositions.value = res.map((item) => (item ? Math.floor(item.top + uni.getSystemInfoSync().windowHeight * 0.4) : 0));
				resolve();
			});
		});
	};
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	::v-deep .kefuPopup {
		background-color: transparent;
	}

	.kefu-fill {
		background: linear-gradient(180deg, #fed9dc 0%, #ffffff 50%);
		border-radius: 20rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		.kefu {
			position: relative;
			width: 412rpx;
			// height: 378rpx;
			.top-icon {
				position: absolute;
				left: 50%;
				top: -110rpx;
				transform: translateX(-50%);
				width: 258rpx;
				height: 223rpx;
			}
			.box {
				padding-top: 120rpx;
				padding-bottom: 42rpx;
				.info {
					padding-bottom: 40rpx;
					.tips {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 10rpx;
					}
					.contact {
						font-weight: 500;
						font-size: 44rpx;
						color: #000000;
					}
				}
				.bd {
					background: linear-gradient(0deg, #f81a2e 0%, #fc4856 100%);
					border-radius: 34rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #ffffff;
					padding: 10rpx 40rpx 11rpx 40rpx;
				}
			}
			.bom-icon {
				position: absolute;
				left: 50%;
				bottom: -87rpx;
				transform: translateX(-50%);
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	::v-deep img {
		width: 100% !important;
	}

	.kill {
		background: #feebe6;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		position: relative;
		margin-top: -20rpx;
		height: 80rpx;
		.bg-1 {
			width: 476rpx;
			height: 98rpx;
			position: absolute;
			top: -14rpx;
			left: 0;
			z-index: 0;
		}

		.right {
			margin-right: 30rpx;
			.tips {
				font-weight: 400;
				font-size: 20rpx;
				color: #f81a2e;
				margin-right: 10rpx;
			}

			.time {
				@include flex;
				align-items: center;

				&__custom {
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					background-color: #fb3204;
					border-radius: 4px;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;

					&__item {
						color: #fff;
						font-size: 12px;
						text-align: center;
					}
				}

				&__doc {
					color: #fb3204;
					padding: 0px 2px;
				}

				&__item {
					color: #606266;
					font-size: 15px;
					margin-right: 4px;
				}
			}
		}

		.left {
			padding: 0 28rpx;
			position: relative;
			margin-top: -10rpx;
			.bg-2 {
				width: 65rpx;
				height: 64rpx;
			}
			.stock {
				margin-left: 20rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				.diff {
					font-weight: 400;
					font-size: 22rpx;
					color: #ffffff;
				}
				.progress {
					width: 196rpx;
				}
				.progress-text {
					font-weight: 400;
					font-size: 22rpx;
					color: #fff;
					margin-left: 13rpx;
				}
			}
		}
	}

	.business {
		background: #ffffff;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-top: 24rpx;
		.logo {
			width: 92rpx;
			height: 92rpx;
		}
		.middle {
			margin-left: 19rpx;
			.title {
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
			}
			.score {
				margin-top: 15rpx;
				gap: 30rpx;
				.item {
					position: relative;
					&::after {
						content: '';
						display: block;
						width: 1rpx;
						height: 18rpx;
						background: #dbdbdb;
						position: absolute;
						top: 50%;
						right: -11rpx;
						transform: translateY(-50%);
					}
					&:last-child::after {
						display: none;
					}
					.score-title {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
					}
					.score-val {
						font-weight: 500;
						font-size: 22rpx;
						color: #333333;
						margin-left: 5rpx;
					}
				}
			}
		}

		.join-btn {
			font-weight: 500;
			font-size: 26rpx;
			color: #ffffff;
			background: linear-gradient(0deg, #f81a2e 0%, #fc4856 100%);
			border-radius: 26rpx;
			padding: 9rpx 20rpx;
		}
	}

	.edit-share {
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 100rpx;
		.inp {
			font-size: 28rpx;
			color: #333333;
			flex: 1 1 0%;
		}
		.place-inp {
			color: #bdbdbd;
			flex: 1 1 0%;
		}
		.textarea {
			height: 250rpx;
			width: 100%;
		}
	}

	.share-box {
		position: relative;
		.share-top {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 20rpx;
			width: 528rpx;
			.icon {
				width: 528rpx;
				height: 528rpx;
				border-radius: 20rpx;
			}
			.share-fill {
				padding: 20rpx 0 28rpx 0;
				border-bottom: 1rpx dashed #eee;
				.left {
					.price {
						font-weight: 500;
						font-size: 38rpx;
						color: #fb3204;
					}
					.title {
						font-weight: 500;
						font-size: 24rpx;
						color: #000000;
						margin-top: 15rpx;
					}
				}
				.qrcode {
					width: 180rpx;
					height: 180rpx;
				}
			}
			.share-clerk {
				margin-top: 26rpx;
				.val {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					width: 80%;
				}
			}
		}
		.edit {
			position: absolute;
			bottom: 425rpx;
			right: 130rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #0896f0;
			margin-top: 20rpx;
			text-align: right;
			> text {
				margin-left: 5rpx;
			}
		}
		.share-bom {
			width: 100%;
			margin-top: 46rpx;
			background: #ffffff;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				padding-top: 32rpx;
				text-align: center;
			}
			.types {
				padding: 32rpx 0;
				.icon-im {
					width: 100rpx;
					height: 100rpx;
				}
				.grid-text {
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
				}
			}

			.clear-btn {
				font-weight: 400;
				font-size: 28rpx;
				color: #777777;
				text-align: center;
				padding: 20rpx;
				border-top: 1rpx solid #eeeeee;
			}
			.wx-btn {
				background-color: transparent;
				border: none !important;
				padding: 0;
				line-height: inherit;
				&::after {
					display: none !important; /* 禁用微信默认的::after边框 */
				}
			}
		}
	}

	.tran {
		background-color: #fff !important;
	}
	.buy-popup {
		.info {
			.icon {
				width: 148rpx;
				height: 148rpx;
			}
			.right {
				margin-left: 23rpx;
				.price {
					font-weight: 500;
					font-size: 40rpx;
					color: #fb3204;
				}
				.spec-selected {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					> text {
						color: #000000;
					}
				}
			}
		}
		.spec {
			margin-top: 40rpx;
			.item {
				margin-bottom: 51rpx;
				.fast-spec {
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					margin-bottom: 24rpx;
				}
				.second-spec {
					flex-wrap: wrap;
					gap: 16rpx;
					box-sizing: border-box;
					.second-spec-item {
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						padding: 10rpx 20rpx;
						background: #f4f5f8;
						border-radius: 27rpx;
					}
					.active {
						background: $theme-bg-gradient-color;
						color: $theme-color;
						padding: 8rpx 20rpx;
						border-radius: 27rpx;
						border: 1px solid $theme-color;
					}
				}
			}
		}
		.num {
			margin-top: 60rpx;
			.left {
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
			}
		}
		.btn-container {
			margin-top: 43rpx;
			padding: 13rpx 0;
			.btn {
				padding: 17rpx 40rpx;
				width: 50%;
				text-align: center;
			}
		}
	}

	.btn-container {
		gap: 16rpx;
		background: #ffffff;

		.btn {
			text-align: center;
			width: 50%;
			border-radius: 36rpx;
			padding: 15rpx 0;
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
		}
		.cart-btn {
			background: linear-gradient(90deg, #face00 0%, #f7af04 100%);
			// padding: 15rpx 30rpx;
		}
		.bny-btn {
			background: $theme-bg-btn-color;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: #ffffff;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
		padding: 13rpx 30rpx;
		.fun {
			margin-right: 24rpx;
			.icon {
				width: 42rpx;
				height: 38rpx;
			}
			.text {
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				margin-top: 6rpx;
			}
		}
	}

	.tab-bar {
		position: fixed;
		top: 0;
		width: 100%;
		height: 88rpx;
		z-index: 9999;
		background-color: transparent;
		.tab-bar-icon {
			background-color: rgb(0, 0, 0, 0.5);
			padding: 10rpx;
			border-radius: 50%;
			margin: 30rpx;
		}

		.plan-2 {
			background-color: #fff;
			width: 100%;
			.top-tab {
				line-height: 88rpx;
				width: 70%;
				.left-icon {
					margin: 0 60rpx 0rpx 30rpx;
				}
				.tabs {
					.item {
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
					}
					.active {
						font-weight: 500;
						font-size: 34rpx;
						color: #000000;
						position: relative;
						&::after {
							content: '';
							display: block;
							width: 64rpx;
							height: 6rpx;
							background: linear-gradient(90deg, #fb3204 0%, #fe7800 100%);
							border-radius: 3rpx;
							position: absolute;
							bottom: 10rpx;
						}
					}
				}
			}
		}
	}

	.banner {
		height: 750rpx;

		.swiper {
			height: 750rpx;
		}

		::v-deep .swiper .uni-swiper-dots-horizontal {
			bottom: 50rpx;
		}

		::v-deep .swiper .uni-swiper-dot {
			width: 6rpx;
			height: 6rpx;
			border-radius: 6rpx;
			background: #ffffff;
			opacity: 0.5;
			margin-right: 6rpx;
		}

		::v-deep .swiper .uni-swiper-dot-active {
			background-color: var(--themeColor);
			opacity: 1;
			width: 12rpx;
		}

		.swiper_item {
			width: 100%;
			height: 750rpx !important;

			> image {
				height: 750rpx;
			}
		}
	}

	.main-title {
		.left {
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			> text {
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}
		.right {
			.text {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-right: 8rpx;
			}
		}
	}
	.hands {
		.tips {
			background: $theme-bg-btn-color;
			border-radius: 12rpx 15rpx 15rpx 0rpx;
			font-weight: 400;
			font-size: 23rpx;
			color: #ffffff;
			line-height: 42rpx;
			padding: 0 10rpx;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			margin-left: 6rpx;
		}
	}

	.container {
		padding-bottom: 120rpx;
		.title-vss {
			background: #ffffff;
			// border-radius: 30rpx;
			padding: 30rpx;
			position: relative;
			.price-vss {
				.left {
					.price {
						font-weight: 500;
						font-size: 44rpx;
						color: #fb3204;
					}

					.underline {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 42rpx;
						text-decoration-line: line-through;
						margin-top: 7rpx;
						margin-left: 10rpx;
					}
				}

				.right {
					position: absolute;
					right: 31rpx;
					top: 23rpx;
					.icon {
						width: 36rpx;
						height: 36rpx;
					}
					> text {
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						margin-top: 10rpx;
					}
				}
			}

			.big-title {
				margin-top: 40rpx;
				.value {
					font-weight: 500;
					font-size: 34rpx;
					color: #000000;
					margin-bottom: 32rpx;
				}
				.sale,
				.stock {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.spec-fee {
			background: #ffffff;
			border-radius: 30rpx;
			margin-top: 24rpx;
			padding: 0 30rpx;
			.item {
				border-bottom: 1rpx solid #eeeeee;
				padding: 35rpx 0;
				&:last-child {
					border-bottom: none;
				}
				.name {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
				.val {
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					margin-left: 40rpx;
				}
			}
		}

		.evaluate {
			background: #ffffff;
			border-radius: 30rpx;
			padding: 34rpx 30rpx;
			margin-top: 24rpx;

			.tab {
				margin: 31rpx 0;
				.tab-item {
					background: #fff3e6;
					border-radius: 10rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #9b7958;
					padding: 11rpx 20rpx;
					margin-right: 12rpx;
				}
			}

			.list {
				.item {
					margin-bottom: 38rpx;
					.left {
						.left-top {
							margin-bottom: 18rpx;
							.photo {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								> image {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}
							.nickname {
								margin-left: 14rpx;
								.val {
									font-weight: 400;
									font-size: 24rpx;
									color: #333333;
									margin-bottom: 12rpx;
								}
							}
						}
						.left-bom {
							font-weight: 400;
							font-size: 26rpx;
							color: #000000;
						}
					}
					.right-icon {
						width: 162rpx;
						height: 162rpx;
						border-radius: 12rpx;
					}
				}
			}
		}

		.expert {
			margin-top: 24rpx;
			background: #ffffff;
			border-radius: 30rpx;
			padding: 34rpx 30rpx;
			.item {
				margin-top: 31rpx;
				.fet {
					position: relative;
					width: 226rpx;
					height: 226rpx;
					.icon {
						width: 100%;
						height: 100%;
						border-radius: 18rpx;
					}
					.video-icon {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}

		.content {
			margin-top: 24rpx;
			.title {
				.icon {
					width: 86rpx;
					height: 3rpx;
				}
				.val {
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					margin: 0 26rpx;
				}
			}

			.content-val {
				margin-top: 24rpx;
				background: #ffffff;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				padding: 30rpx;
			}
		}
	}
</style>
